<template>
  <div>
      <el-tabs v-model="activeName" @tab-click="handleClickTab">
        <el-tab-pane label="流程详情" name="workflowDetails">
          <div class="">
            <Parser v-if="startParser"
                    :key="parserKey"
                    :form-model="formModel"
                    :label-form-model="labelFormModel"
                    :form-conf="formConf" @next="nextPage" @prev="prevPage" @submit="submitForm"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="流转记录" name="circulationRecord" >
          <el-col>
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  style="left: 1px"
                  v-for="(item,index ) in workflowHistoryRecordList"
                  :key="index"
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{item.taskName}}</p>
                  <el-card :body-style="{ padding: '10px' }">
                    <p  v-if="item.candidate">
                    <label style="font-weight: normal;">候选办理： {{item.candidate}}</label>
                    </p>
                    <p  v-if="item.assigneeName">
                    <label style="font-weight: normal;">实际办理： {{item.assigneeName}} <el-tag v-if="item.startDeptName" type="info" size="mini">{{item.startDeptName}}</el-tag></label>
                    </p>
                    <p  v-if="item.createTime">
                    <label style="font-weight: normal">接收时间： </label><label style="color:#8a909c;font-weight: normal">{{item.createTime}}</label>
                    </p>

                    <p v-if="item.finishTime">
                      <label style="font-weight: normal">办结时间： </label><label style="color:#8a909c;font-weight: normal">{{item.finishTime}}</label>
                    </p>

                    <p v-if="item.duration">
                      <label style="font-weight: normal">总共耗时： </label><label style="color:#8a909c;font-weight: normal">{{item.duration}}</label>
                    </p>

                    <p style="padding-top: 8px;"  v-if="item.commentDtoList"  v-for="(comment,index) in item.commentDtoList">
                      <el-tag type="success" v-if="comment.type === '1'">  {{comment.comment}}</el-tag>
                      <el-tag type="danger" v-if="comment.type === '2'">  {{comment.comment}}</el-tag>
                      <el-tag type="danger" v-if="comment.type === '3'">  {{comment.comment}}</el-tag>
                      <el-tag type="warning" v-if="comment.type === '4'">  {{comment.comment}}</el-tag>
                      <el-tag type="warning" v-if="comment.type === '5'">  {{comment.comment}}</el-tag>
                      <el-tag type="danger" v-if="comment.type === '6'">  {{comment.comment}}</el-tag>
                      <el-tag type="primary" v-if="comment.type === '7'">  {{comment.comment}}</el-tag>
                      <el-tag type="danger" v-if="comment.type === '8'">  {{comment.comment}}</el-tag>
                    </p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="流程进度" name="workflowChart">
          <div style="text-align: center; width: 100%;height: 100%;">
            <img :src="workflowRecordPreviewImage" class="image-item" />
          </div>
        </el-tab-pane>

        <el-tab-pane label="流程模型" name="workflowModel" style="height:550px;overflow-y:auto;overflow-x:auto;">
          <div style="text-align: center; 100%;height: 100%;">
            <!--beg-->
            <section class="dingflow-design" style="background-color: #ffffff">
              <div class="box-scale" id="box-scale" style="background-color: #ffffff">
                <nodeWrapView :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrapView>
                <div class="end-node">
                  <div class="end-node-circle"></div>
                  <div class="end-node-text">流程结束</div>
                </div>
              </div>
            </section>
            <!--end-->
          </div>
        </el-tab-pane>
      </el-tabs>

  </div>
</template>
<script>
  import Parser from '@/components/DuoJuHe/Form/parser/Parser'
  import {dbDataConvertForItemJson,pageShowHandle,checkAddNumberByItemType} from '@/utils/form/utils/convert'
  import _ from 'lodash'
  import {queryMyWorkflowRecordDetailsEditResByRecordId,queryWorkflowHistoryRecordPageResLisByRecordId,queryWorkflowRecordReadImage } from '@/api/workflow/workflowRecord'
  import {queryWorkflowProcessConfig} from '@/api/workflow/workflowProject'
  export default {
    name: "workflowRecordDetails",
    components: {
      Parser
    },
    props: {
      recordId: {
        type: String
      },
      projectId: {
        type: String
      },
    },
    data() {
      return {
        //流程图例beg
        nodeConfig: {},
        flowPermission: [],
        //流程图例end
        //流程详情tab默认定位
        activeName: 'workflowDetails',
        // 遮罩层
        loading: false,
        //流程图片图片
        workflowRecordPreviewImage: "",
        logicItemMap:undefined,
        logicShowTriggerRule: {},
        startParser: false,
        formModel: {},
        labelFormModel: {},
        projectTheme: {
          headImage: '',
          logoImage: '',
          backgroundImg:'',
          showTitle: true,
          showDescribe: true
        },
        parserKey: +new Date(),
        // 每页数据
        perPageFields: {},
        // 流程流转数据
        workflowHistoryRecordList: [],
        formConf: {
          fields: [],
          logicShowRule: {},
          projectId: '',
          projectKind: 1,
          __methods__: {},
          formRef: 'elForm',
          formModel: 'formData',
          labelFormModel: 'labelFormData',
          size: 'small',
          labelPosition: 'top',
          labelWidth: 100,
          formRules: 'rules',
          gutter: 15,
          disabled: true,
          span: 24,
          formBtns: false,
          resetBtn: false,
          submitBtnText: '',
          showNumber: true,
          unFocusedComponentBorder: true
        }
      };
    },
    beforeCreate() {
      document.querySelector('body').className = 'project-body'
    },
    created() {
      this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
      //查询我的流程记录表单详情
      this.queryMyWorkflowRecordDetailsEditResByRecordId();
      //显示流程图片
      this.queryWorkflowRecordPreviewImage()

    },
    async mounted() {
      //查询历史流转详情
      this.queryWorkflowHistoryRecordPageResLisByRecordId();
    },
    methods: {
      //切换tab
      handleClickTab(tab, event) {
        let activeName = this.activeName;
        if ('circulationRecord'===activeName){
          //查询历史流转详情
          this.queryWorkflowHistoryRecordPageResLisByRecordId();
        }else  if ('workflowChart'===activeName){
          //显示流程图片
          this.queryWorkflowRecordPreviewImage()
        }else if ('workflowModel'===activeName){
          //显示流程模型
          this.queryModelProcessConfig()
        }else {
          //查询我的流程记录表单详情
          this.queryMyWorkflowRecordDetailsEditResByRecordId();
        }
      },

      //获取流程模型
      queryModelProcessConfig() {
        const projectId={projectId:this.projectId}
        queryWorkflowProcessConfig(projectId).then(res => {
          let {nodeConfig,flowPermission} = res.data
          this.nodeConfig = nodeConfig;
          this.flowPermission = flowPermission;
        })
      },

      //流程图片
      queryWorkflowRecordPreviewImage() {
        const recordId={recordId:this.recordId}
        queryWorkflowRecordReadImage(recordId).then(res => {
          this.workflowRecordPreviewImage = res.data;
        });
      },
      //beg
      queryMyWorkflowRecordDetailsEditResByRecordId(){
        //beg
        const recordId={recordId:this.recordId}
        queryMyWorkflowRecordDetailsEditResByRecordId(recordId).then(res => {
          if (res.data) {
            let data = res.data
            if (data.originalData){
              this.formModel = JSON.parse(data.originalData)
            }
            if (data.processData){
              this.labelFormModel = JSON.parse(data.processData)
            }
            let serialNumber = 1
            let fields = data.formProjectItemResList.map(item => {
              let projectItem = dbDataConvertForItemJson(item)
              projectItem.serialNumber = serialNumber
              projectItem.logicShow = true
              if (checkAddNumberByItemType(item.type)){
                serialNumber++
              }
              return projectItem
            })
            //处理分页数据
            this.perPageFields = pageShowHandle(fields)

            if (_.keys(this.perPageFields).length != 0) {
              this.formConf.fields = _.get(this.perPageFields, 1)
              this.formConf.formBtns = false
            } else {
              this.formConf.fields = fields
            }
            if (data.formProjectRes) {
              let formProjectRes = data.formProjectRes
              this.formConf.title = formProjectRes.projectName
              this.formConf.description = formProjectRes.description
            }
            this.formConf.logicShowRule = this.logicShowTriggerRule
            this.startParser = true
          }
        })
        //end
      },
      //历史流转记录
      queryWorkflowHistoryRecordPageResLisByRecordId(){
        this.loading = true
        this.workflowHistoryRecordList= []
        //beg
        const recordId={recordId:this.recordId}
        queryWorkflowHistoryRecordPageResLisByRecordId(recordId).then(res => {
          this.workflowHistoryRecordList = res.data.records
        }).finally(() => {
          //关闭加载特效
          this.loading = false
        })
        //end
      },
      //设置icon
      setIcon(val) {
        if (val) {
          return "el-icon-check";
        } else {
          return "el-icon-time";
        }
      },
      //设置颜色
      setColor(val) {
        if (val) {
          return "#2bc418";
        } else {
          return "#b3bdbb";
        }
      },
      /**
       * 处理逻辑显示数据
       */
      prevPage(params) {
        this.switchPage(params.page - 1, params)
      },
      nextPage(params) {
        this.switchPage(params.page + 1, params)
      },
      switchPage(page, params) {
        let {labelFormModel, formModel} = params
        this.formModel = formModel
        this.labelFormModel = labelFormModel
        this.formConf.formBtns = _.keys(this.perPageFields).length == page
        this.formConf.fields = _.get(this.perPageFields, page)
        this.parserKey = +new Date()
      },
      submitForm(data) {
        this.$emit('submit', data)
      }

      //end
    }
  };
</script>
<style lang="scss">
  /* 图片原图大小自适应 等比缩放 */
  .image-item {
    max-width: 100%;
    max-height: 100%;
  }
</style>
<style>
  @import "~@/assets/styles/workflow/workflow.css";
</style>
